<template>
  <div class="directiveStudy" v-waterMarker="{ text: 'xiao xi liu' }">
    <h4>
      什么时候需要自定义指令？ 需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 需要将某些功能在指定DOM元素上使用
    </h4>

    <div class="drag_box">
      <div v-draggable class="canMoveBox">实现v-draggable可拖拽</div>
    </div>
    <div class="focus_box"><input v-focus /><span>v-focus自定义指令</span></div>
    <div class="copy_box">
      <el-input v-model="strName"></el-input>
      <el-button v-copy="strName">v-copy复制的自定义指令</el-button>
    </div>
    <div>
      <h4>el, binding, vnode, prevVnode</h4>
      <h4>created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted</h4>
    </div>
    <div>
      <button v-repeat-click="clickMe">节流的点击事件</button>
      <p v-repeat-click="clickMe">节流的点击事件11</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
let strName = ref("111");
onMounted(() => {
  console.log("onMounted");
});

const clickMe = () => {
  console.log("11111111");
};
</script>
<style scoped lange="scss">
.drag_box {
  position: relative;
  height: 200px;
  /* background: pink; */
}
.canMoveBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  /* background: red; */
  position: absolute;
  font-size: 23px;
  font-weight: bold;
  top: 110px;
}
.focus_box {
  /* background: green; */
}
.copy_box {
  /* background: blue; */
}
</style>
